<template>
  <div class="back">
    <div class="bg-blur"></div>
    <div class="login">
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="70px" class="demo-ruleForm">

        <div class="form-head">
          <h1 class="text-title"><i class="el-icon-upload , icon" style="margin-right: 10px;"></i>cloud-storage</h1>
        </div>

        <div class="form-centre">
          <el-form-item label="用户名：">
            <el-input type="text" v-model="ruleForm.userName" autocomplete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" show-password
              placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-radio v-model="ruleForm.gender" label="0"><i class="el-icon-male"
                style="margin-right: 10px;"></i>男</el-radio>
            <el-radio v-model="ruleForm.gender" label="1"><i class="el-icon-female"
                style="margin-right: 10px;"></i>女</el-radio>
          </el-form-item>
          <el-form-item label="邮箱：">
            <el-input type="text" v-model="ruleForm.email" autocomplete="off" placeholder="请输入或邮箱"></el-input>
          </el-form-item>
          <el-form-item label="验证码：">
            <template style="display: flex;">
              <el-input style="width: 100px; margin-right: 10px;" type="text" v-model="ruleForm.code" autocomplete="off"
                placeholder="验证码"></el-input>
              <el-button :disabled="countdown > 0" @click="startCountdown">
                {{ countdown > 0 ? countdown + '秒' : '获取验证码' }}
              </el-button>
            </template>
          </el-form-item>
          <el-form-item>
            <el-button round class="login-btn" type="primary" @click="submitForm(ruleForm)">注册</el-button>
          </el-form-item>
        </div>

        <div class="form-bottom">
          <a href="/">返回登录</a>
          <a href="/resetPwd">忘记密码</a>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import router from "@/router";
  import apiUrl from "@/api/url.js";
  import link from "@/api/Link.js";
  export default {
    name: "Register",
    data () {

      return {
        ruleForm: {
          userName: "",
          password: "",
          role: "1",
          gender: '0',
          code: '',
        },
        countdown: 0,
        timer: null,

      };
    },

    methods: {
      //注册
      submitForm (ruleForm) {
        let data = {
          email: this.ruleForm.email,
          code: this.ruleForm.code,
          userName: this.ruleForm.userName,
          password: this.ruleForm.password,
          role: 1,
          gender: this.ruleForm.gender,
        }
        link(apiUrl.baseUrl + '/sys/user/register/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code === 0) {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            router.push("/");
          } else {
            this.$message.error(ok.data.msg);
          }
        })
      },

      startCountdown () {
        let data = {
          email: this.ruleForm.email
        }
        link(apiUrl.baseUrl + '/sys/user/getCode/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code === 0) {
            this.$message({
              message: "验证码发送成功，请查看邮箱",
              type: "success",
            });
            this.countdown = 59;
            this.timer = setInterval(() => {
              if (this.countdown > 0) {
                this.countdown--;
              } else {
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000);
          } else {
            this.$message.error(ok.data.msg);
          }
        })
      }

    },

    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    watch: {
      countdown: {
        handler (newVal) {
          this.countdown = newVal
        }
      }
    }
  };
</script>

<style scoped>
  .login {
    display: flex;
    justify-content: center;
    align-content: center;
    padding-top: 100px;
  }

  .demo-ruleForm {
    background-color: white;
    width: 300px;
    padding: 50px;
    /* margin-right: 500px; */
    border: 1px solid black;
    border-radius: 8%;
    /*设置透明度，0为完全透明，1为不透明*/
    opacity: 0.8;
  }

  .text-title {
    text-align: center;
    font-family: serif;
    font-style: normal;
  }

  .back {
    height: 100%;
    width: 100%;
  }

  .bg-blur {
    height: 100%;
    width: 100%;
    /*渐变的背景色*/
    /*height: 100vh;
  background-image: linear-gradient(to bottom right, #FC466B, #3F5EF8);
  overflow: hidden;*/
    /*背景图*/
    background: url("../../assets/beijing.jpeg");
    position: fixed;
    background-size: 100% 100%;
    z-index: -1;
    /* filter: blur(1px); */
  }

  .login-btn {
    width: 100%;
    /* border-radius: 10%; */
  }

  .form-bottom {
    display: flex;
    justify-content: space-between;
  }
</style>